<template>
    <ul class="btn-group">
        <li class="btn">
            <router-link tag="button" class="btn-history" to="/main/history"><span class="iconfont icon-icon_message"></span></router-link>
            <div class="tooltip">最近聊天</div>
        </li>
        <li class="btn">
            <router-link tag="button" class="btn-friends" to="/main/friends"><span class="iconfont icon-icon_signal"></span></router-link>
            <div class="tooltip">好友</div>
        </li>
        <li class="btn">
            <router-link tag="button" class="btn-groups" to="/main/groups"><span class="iconfont icon-icon_group"></span></router-link>
            <div class="tooltip">群组</div>
        </li>
        <li class="btn">
            <router-link tag="button" class="btn-circle" to="/main/circle"><span class="iconfont icon-icon_circle_line"></span></router-link>
            <div class="tooltip">朋友圈</div>
        </li>
        <li class="btn">
            <router-link tag="button" class="btn-my" to="/main/my"><span class="iconfont icon-icon_namecard"></span></router-link>
            <div class="tooltip">我的</div>
        </li>
        <!-- <li class="btn">
            <button @click="hideRightPanel"><span class="iconfont icon-icon_circle_line"></span></button>
            <div class="tooltip">右边隐藏</div>
        </li> -->
    </ul>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    hideRightPanel: function () {
      this.$store.commit('setRightPanelType', '')
    }
  }
}
</script>

<style>
.btn-group{
    width: fit-content;
    margin: 10px auto;
}
.btn-group .btn{
    float: left;
    margin-right: 10px;
}
.btn-group .btn:last-child{
    margin-right: 0;
}
.tooltip{
    position: absolute;
    /*display: none;*/
    opacity: 0;
    background: whitesmoke;
    transition: all .3s ease;
}
.btn:hover .tooltip{
    /*display: block;*/
    opacity: 255;
}
</style>
